import React, { ChangeEvent, useCallback } from 'react';
import FormItem from '../FormItem';
import classes from './index.module.css';

type TextInputInf = {
  label?: string;
  placeholder?: string;
  value?: string;
  onChange?: (value: string) => void;
};

export default function TextInput({
  placeholder = '',
  label = '',
  value,
  onChange,
}: TextInputInf) {
  const handleChange = useCallback(
    function (event: ChangeEvent<HTMLInputElement>) {
      if (onChange) {
        onChange(event.target.value);
      }
    },
    [onChange],
  );

  return (
    <FormItem label={label}>
      <input
        className={classes.InputElem}
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
      />
    </FormItem>
  );
}
